<template>
  <div class="container">
    <div style="background: #fff; width: 600px; margin: 60px auto; padding: 20px 50px;">
      <el-image
          class="logo"
          width="180px"
          height="180px"
          fit="contain"
          :src="require('@/assets/salecar_img/logo.png')"/>
      <el-form>
        <el-input
            v-model="formInfo.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[
          { required: true, message: '用户名不能为空' },
          { pattern: /^[a-zA-Z]\w{4,16}$/, message: '用户名必须是由字母、数字组成的4~16字符' }
        ]"
        />
        <el-input
            v-model="formInfo.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <el-input
            v-model="formInfo.ackPassword"
            type="password"
            name="重复密码"
            label="重复密码"
            placeholder="请再次密码"
            :rules="[
          { required: true, message: '请再次输入密码' },
          {
            validator: () => {
              return formInfo.password == formInfo.ackPassword;
            },
            message: '重复密码需要与密码输入一致',
          },
        ]"
        />
        <el-input
            v-model="formInfo.nickname"
            type="text"
            name="用户昵称"
            label="用户昵称"
            placeholder="请输入用户昵称"
            :rules="[{ required: true, message: '用户昵称不能为空' }]"
        />
        <el-input
            v-model="formInfo.address"
            type="text"
            name="地址"
            label="地址"
            placeholder="请输入地址"
            :rules="[{ required: true, message: '地址不能为空' }]"
        />
        <el-input
            v-model="formInfo.email"
            type="text"
            name="邮箱"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[
          { required: true, message: '请输入邮箱' }
        ]"
        />
        <el-input
            v-model="formInfo.phone"
            type="text"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
          { required: true, message: '请输入手机号' }
        ]"
        />
        <div style="margin: 16px">
          <el-button round block type="info" @click="onSubmit"
          >快速注册
          </el-button
          >
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      formInfo: {
        username: 'test-user-001',
        password: '123456',
        ackPassword:'123456',
        nickname: '测试用户001',
        avatar: 'https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        phone: '13700137001',
        email: '13700137001@163.com',
        address:'浙江省宁波市海曙区'
      }, // 用于描述表单信息
      timeoutTask: null, // 用于防抖任务
    };
  },
  methods: {
    onSubmit(formName) {
          let url = 'http://localhost:5081/user/sso/register';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.formInfo);
          console.log('formData = ' + formData);

          this.axios.post(url, formData).then((response) => {
            let responseBody = response.data;
            console.log(responseBody);
            if (responseBody.state == 200) {
              this.$message({
                showClose: true,
                message: '注册成功！',
                type: 'success'
              });
              alert("恭喜您注册成功!")
              history.back();
            } else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          });
    }
  }
}
</script>
<style scoped>
/** 容器样式 */
.container {
  text-align: center;
  height: 100vh;
  background-size: cover;
}

.container .bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

.container .logo {
  margin-top: 60px;
}

.link {
  margin: 0px 20px;
  color: #333;
}
</style>
<style>
body {
  background: #2c3e50;
}
</style>

